<template>
  <div
    class="slideshow"
    :style="divStyle"
    ref="textImg"
    @mouseenter="btnShow = true"
    @mouseleave="btnShow = false"
  >
    <div :id="swiperId" class="swiper-container" v-if="currentImages.length">
      <div class="swiper-wrapper">
        <template>
          <div
            v-for="item in currentImages"
            :key="item.id"
            ref="imgItem"
            class="swiper-slide swiper-no-swiping img-item"
          >
            <a :href="item.link" target="_blank">
              <img :style="pictureStyle" alt="图片不见啦" :src="picSrc + '/' + item.url" />
              <span class="title" v-if="item.subject !== ''"
                ><span>{{ item.subject }}</span></span
              >
            </a>
          </div>
        </template>
      </div>
      <div class="pagination" v-show="!isOnePicture"></div>
      <div class="control-btn left-btn" @click="handleLeft" v-show="btnShow && !isOnePicture">
        <span>&lt;</span>
      </div>
      <div class="control-btn right-btn" @click="handleRight" v-show="btnShow && !isOnePicture">
        <span>&gt;</span>
      </div>
    </div>
    <div v-else><img :src="defaultImg" alt="" /></div>
  </div>
</template>

<script>
  // import emitter from '../../utils/global';
  import { methods } from '@/utils';
  import swiper from '@/mixins/swiper';
  export default {
    name: 'PicBanner',
    mixins: [swiper],
    props: {
      sectionData: {
        type: Object
      },
      contentWidth: {
        type: Number
      }
    },

    data() {
      return {
        picSrc: imgBasePath,
        currentImages: [],
        activeIndex: 0,
        swiperId: `swiper${this._uid}`,
        btnShow: false,
        defaultImg: _basePath + '/entry/assets/images/default.jpeg'
      };
    },
    computed: {
      isOnePicture() {
        if (this.currentImages && this.currentImages.length == 1) {
          return true;
        }
        return false;
      },
      playSpeed() {
        switch (this.sectionData.options.speed) {
          case 'speed1':
            return 1000;
          case 'speed2':
            return 3000;
          case 'speed3':
            return 5000;
          default:
            return 300;
        }
      },
      divStyle() {
        return {
          'background-color': this.sectionData.options.backgroundColor,
          height: `${methods.getContentHeight(this.sectionData.options)}px`,
          width: '100%'
        };
      },
      pictureStyle() {
        // console.log(
        //   typeof this.sectionData.options.pictureStyle,
        //   this.sectionData.options.pictureStyle
        // );
        //等比自动缩放自适应  等比缩放显示全图1 拉伸2
        let style = {
          width: '100%',
          height: '100%'
        };
        if (this.sectionData.options.pictureStyle === '0') {
          style.objectFit = 'cover';
        } else if (this.sectionData.options.pictureStyle === '1') {
          style.objectFit = 'contain';
        } else if (this.sectionData.options.pictureStyle === '2') {
          style.objectFit = 'fill';
        }
        return style;
      }
    },
    mounted() {
      this.currentImages = this.sectionData.data.pictures || [];

      this.$nextTick(() => {
        this.setSwiper(
          new Swiper(`#${this.swiperId}`, {
            loop: true,
            autoplay: this.isOnePicture ? false : this.playSpeed,
            speed: 300,
            autoplayDisableOnInteraction: false,
            mode: 'horizontal',
            pagination: `#${this.swiperId} .pagination`,
            paginationClickable: true,
            createPagination: true,
            // noSwiping : true,
            onAutoplayStop: function (swiper) {
              if (!swiper.support.transitions) {
                //IE7、IE8
                swiper.startAutoplay();
              }
            }
          })
        );
      });
    },

    methods: {
      /**
       * @description 向左调幻灯片
       */
      handleLeft() {
        this._swiper.swipePrev();
      },
      /**
       * @description 向右调幻灯片
       */
      handleRight() {
        this._swiper.swipeNext();
      }
    }
  };
</script>
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .slideshow {
    height: 100%;
    overflow: hidden;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    //border: 1px solid red;
    overflow: hidden;

    .swiper-wrapper {
      width: 100%;
      height: 100%;
    }

    .img-item {
      position: relative;
      width: 100%;
      height: 100%;

      a {
        display: inline-block;
        width: 100%;
        height: 100%;
      }

      img {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .title {
        position: absolute;
        bottom: 0;
        z-index: 999;
        width: 100%;
        height: 35px;
        padding: 0 20px;
        overflow: hidden;
        font-size: 14px;
        line-height: 35px;
        color: #fff;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, 0.5);
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
      }
    }
  }

  .pagination {
    position: absolute;
    right: 10px;
    bottom: 0;
    z-index: 999;
    height: 30px;
    text-align: center;
  }

  .control-btn {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    font-size: 22px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #000;
    border-radius: 50%;
    opacity: 0.15;
  }

  .left-btn {
    left: 30px;
  }

  .right-btn {
    right: 30px;
  }

  .text-column {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.137);
  }

  .title-item {
    z-index: 9999;
    padding-top: 10px;
    padding-left: 15px;
    cursor: pointer;
  }

  .title-active {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
  }

  .title-active::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    width: 5px;
    background-color: #2490f8;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    content: '';
  }
</style>
<style>
  .swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;

    /* display: inline-block; */
    margin-left: 10px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
  }

  .swiper-active-switch {
    width: 20px;
    height: 10px;
    background-color: #2490f8;
    border-radius: 10px;
  }
</style>
